<!-- 声明周期-->
<template>
  <div class="lift-circle">
    <p>p元素</p>
    <!-- 更新的监测 -->
    <ul>
      <li v-for="(value, index) in arr" :key="index">
        {{ value }}
      </li>
    </ul>
    <button @click="arr.push('d')">添加数据</button>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      msg: "组件的数据",
      arr: ["a", "b", "c"],
      interId: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  // 1.第一次加载页面时,触发4个钩子函数 beforeCreate(),  created() ,  beforeMount(),  mounted(),加载一次
  // 2.最早可以访问data中的数据的钩子函数是created()
  // 3.在mounted()钩子函数中才可以访问DOM元素
  // 4.页面数据发生改变时,会触发更新的钩子函数  beforeUpdate() updated()
  // 5.销毁组件时触发销毁的钩子函数 beforeDestroy() destroyed()

  //生命周期 - 创建之前
  beforeCreate() {
    console.log("beforeCreate创建前");
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  //   数据等方法已经创建,第一次最早拿到data数据的钩子函数
  // 使用场景:初始化页面数据
  created() {
    console.log("created创建后");
    console.log(this.msg);
  },
  //生命周期 - 挂载之前
  beforeMount() {
    console.log("beforeMount挂载前");
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  //   真正挂载到页面上的DOM元素
  // 使用场景:获取真实的DOM元素-DOM元素进行修改等等--去做异步请求接口修改页面

  mounted() {
    console.log("mounted挂载后");
    console.log(document.querySelector("p"));
    // 定义一个定时器
    this.interId = setInterval(function () {
      console.log("定时器");
    }, 1000);
  },
  //生命周期 - 更新之前
  beforeUpdate() {
    console.log("beforeUpdate更新前");
  },
  //生命周期 - 更新之后
  //   使用场景:获取更新后的真实的DOM元素
  updated() {
    console.log("updated更新后");
  },
  //生命周期 - 销毁之前
  // 使用场景:移除全局事件,移除定时器,移除自定义事件$off
  beforeDestroy() {
    console.log("beforeDestroy销毁前");
    clearInterval(this.interId);
  },
  //生命周期 - 销毁完成
  destroyed() {
    console.log("destroyed销毁后");
  },
};
</script>
<style>
</style>